<template>
	<div class="container" @click="handleGallaryClick">
		<div class="wrapper">
			<swiper :options="swiperOptions">
				<swiper-slide v-for="(item,index) in imgs" :key="index">
					<img class="gallary-img" :src="item"></img>
				</swiper-slide>

				<div class="swiper-pagination" slot="pagination"></div>

				<!--以下看需要添加-->
<!-- 				<div class="swiper-scrollbar" slot="scrollbar"></div> -->
				<!-- 			<div class="swiper-button-prev" slot="button-prev"></div>
				<div class="swiper-button-next" slot="button-next"></div> -->
			</swiper>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'CommonGallary',
		props: {
			imgs: {
				type:Array,
				default () {
					return []
				}
			}
		},
		data () {
		    return {
		      swiperOptions: {
		        pagination: '.swiper-pagination',
		        paginationType: 'fraction',
		        observeParents: true,
		        observer: true
		      }
		    }
		  }, methods: {
			  handleGallaryClick () {
				  this.$emit('close')
			  }
		  }
	}
</script>

<style scoped="scoped">
	.container >>> .swiper-container {
		overflow: inherit;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		z-index: 99;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: #000;
	}

	.wrapper {
		height: 0;
		width: 100%;
		padding-bottom: 100%;
	}

	.gallary-img {
		width: 100%;
	}
	
	.swiper-pagination {
		color: #fff;
		bottom: -1rem;
	}
</style>
